How to change input type="date" format YYYY-MM-DD?
Akif Hossain
| Asked on 2022-09-19 | • HTML, CSS
By default, the input type="date" shows date as YYYY-MM-DD. 2022-09-19
The question is, is it possible to force it's format to something like: DD-MM-YYYY? 19-09-2022
<input type="date" name="date">
#html #css #date #inputdate
CSS
input {
position: relative;
width: 150px; height: 20px;
color: white;
}
input:before {
position: absolute;
top: 3px; left: 3px;
content: attr(data-date);
display: inline-block;
color: black;
}
input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
display: none;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
top: 3px;
right: 0;
color: black;
opacity: 1;
}
</style>
JS: (In Header)
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
HTML AND JS
<script type="text/javascript">
$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD")
.format( this.getAttribute("data-date-format") )
)
}).trigger("change")
</script>